import React from 'react';

// import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import { HashRouter as Router, Route, Switch, Link } from 'react-router-dom';

import ButtonDoc from './pages/Button/index.mdx';
// import TabeDoc from './pages/Table/index.mdx';

import Layout from './helper/Layout.js'

const AppRouter = () => (
    <Router>
        <div className="layout">
            <div className="layout-side">
                <ul>
                    <li><Link to="/button">按纽</Link></li>
                    <li><Link to="/table">表格</Link></li>
                </ul>
            </div>

            <div className="layout-body markdown-body">
                <Layout>
                    <Switch>
                        <Route exact path="/button" component={ButtonDoc} />
                        {/* <Route path="/table" component={TabeDoc} /> */}
                    </Switch>
                </Layout>
            </div>

        </div>
    </Router>
);

export default AppRouter;